<script lang="ts" setup>
import type { CertInfo } from '@/types'
import type { FormInst } from 'nutui-uniapp'
import { useSteps } from '@/composables/useSteps'
import { useApplyStore } from '@/store'

interface Option {
  text: string
  value: string
}

const { phoneNumber, certInfo, currentStep } = storeToRefs(useApplyStore())

const { next } = useSteps('owner')
const ruleForm = ref<FormInst | null>(null)
const isVisiblity = ref<boolean>(false)
// form初始化
const form = ref<CertInfo>({
  certType: '01',
  certName: '',
  certNo: '',
  certStartDate: '',
  certEndDate: '',
  certAddr: '',
  phoneNumber: phoneNumber.value,
})
if (certInfo.value.certName !== '') {
  form.value = certInfo.value
}
const certUploader = ref()

function certZhengValidator() {
  return new Promise((resolve) => {
    certUploader.value.validate().then((pool: any) => {
      resolve(pool.zheng)
    })
  })
}
function certBeiValidator() {
  return new Promise((resolve) => {
    certUploader.value.validate().then((pool: any) => {
      resolve(pool.bei)
    })
  })
}

const rules = {
  cert: [
    { validator: certZhengValidator, message: '请上传证件照正面图片' },
    { validator: certBeiValidator, message: '请上传证件照反面图片' },
  ],
  certName: [
    { required: true, message: '请输入姓名' },
  ],
  certNo: [
    { required: true, message: '请输入证件号码' },
    { regex: /^[0-9x]{18}$/i, message: '必须由18位的数字或字母X构成' },
  ],
  certStartDate: [
    { required: true, message: '请输入发证日期' },
  ],
  certEndDate: [
    { required: true, message: '请输入到期日期' },
  ],
  certAddr: [
    { required: true, message: '请输入证件地址' },
  ],
  phoneNumber: [
    { required: true, message: '请输入手机号码' },
  ],
}

const options = ref<Option[]>([
  { text: '身份证', value: '01' },
])

function certUploaded(value: any) {
  console.log('基础信息---')
  console.log(value)
  if (value.type === '5') {
    form.value.certName = value.certName
    form.value.certNo = value.certNo
    form.value.certAddr = value.certAddr
  }
  else if (value.type === '6') {
    form.value.certStartDate = value.certStartDate
    form.value.certEndDate = value.certEndDate
  }
}

function clickPrev() {
  uni.navigateBack({
    delta: 1,
  })
}

function clickNext() {
  // 表单校验
  ruleForm.value?.validate().then(({ valid }) => {
    if (valid) {
      // 先存数据
      form.value.certNo = form.value.certNo.toLocaleUpperCase()
      certInfo.value = form.value
      next()
    }
  })
}
</script>

<template>
  <div class="input">
    <steps-bar />
    <nut-form ref="ruleForm" :model-value="form" :rules="rules">
      <nut-form-item required prop="cert">
        <cert-upload ref="certUploader" @uploaded="certUploaded" />
      </nut-form-item>
      <nut-form-item label="证件类型" :label-width="120">
        <option-select v-model="form.certType" title="证件类型" :options="options" inputAlign="right" />
      </nut-form-item>
      <nut-form-item label="姓名" prop="certName" required :label-width="120">
        <nut-input v-model="form.certName" class="nut-input-text" placeholder="请输入姓名" type="text" input-align="right"
          placeholder-style="color:#ccc;" max-length="20" />
      </nut-form-item>
      <nut-form-item label="证件号码" prop="certNo" required :label-width="120">
        <idnumber-input v-model="form.certNo" v-model:isVisiblity="isVisiblity" placeholder="请输入证件号码"
          inputAlign="right" />
      </nut-form-item>
      <nut-form-item label="发证日期" prop="certStartDate" required :label-width="120">
        <date-picker v-model="form.certStartDate" title="发证日期" inputAlign="right" />
      </nut-form-item>
      <nut-form-item label="到期日期" prop="certEndDate" required :label-width="120">
        <date-picker v-model="form.certEndDate" title="到期日期" inputAlign="right" />
      </nut-form-item>
      <nut-form-item label="证件地址" prop="certAddr" required :label-width="120">
        <nut-textarea v-model="form.certAddr" class="nut-input-text" placeholder="请输入证件地址" type="text" autosize
          text-align="right" placeholder-style="color:#ccc;" max-length="45" :disabled="isVisiblity" />
      </nut-form-item>
      <nut-form-item label=" 手机号码" prop="phoneNumber" required :label-width="120">
          <nut-input v-model="form.phoneNumber" class="nut-input-text" placeholder="请输入手机号码" type="number" disabled
            input-align="right" placeholder-style="color:#ccc;" max-length="11" />
      </nut-form-item>
    </nut-form>

    <div class="button">
      <!-- <nut-button v-if="currentStep > 0" type="primary" custom-class="login-btn shake_o" block
        @click="clickPrev">上一步</nut-button> -->
      <nut-button type="primary" custom-class="login-btn shake_o" block @click="clickNext">下一步</nut-button>

      <!-- <nut-button v-if="currentStep > 0" type="primary" block @click="clickPrev">上一步</nut-button>
      <nut-button type="primary" block @click="clickNext">下一步</nut-button> -->
    </div>
  </div>
</template>

<route lang="json">
{
  "style": {
    "navigationBarTitleText": "商户进件",
    "backgroundColorContent": "#f1f1f1"
  }
}
</route>

<style lang="sass" scoped>
.input
  .button
    margin: 40px 20px
    
:deep(.login-btn)
  width: 100%
  height: 85rpx
  margin-top: 30rpx
  background-color: #2196F3!important

:deep(.nut-textarea__textarea)
  text-align: right!important

:deep(.nut-uploader__upload)
  width: 100%!important

:deep(.nut-uploader__preview)
  width: 100%!important

:deep(.nut-step-main)
  margin-top: 20rpx

:deep(.nut-uploader__preview-img)
  width: 320rpx
</style>
